<template>
	<view>
		<view class="user" @click="toPage('/pagesA/userLogin/userLogin')">
			<u-icon name="plus" label="点击添加约课用户" v-if="noLogin"></u-icon>
			<view v-else class="user_box">
				<view class="user_box_1">
					<image src="../../static/icon/user0.png" mode="aspectFit" class="user_logo"></image>
					<view class="user_info">
						<view class="name">{{ user.name }}</view>
						<view class="tel">{{ user.tel }}</view>
					</view>
				</view>
				
				<u-icon name="arrow-right" label="更改" labelPos="left" labelSize="25"></u-icon>
			</view>
		</view>
		
		<view class="tab" v-if="!noLogin">
			<view v-for="(item, idx) in tabs" :key="idx" class="tab-item" @click="toPage(item.to)" v-if="isShowTab(item)">
				<view style="display: flex;align-items: center;">
					<image :src="item.icon" mode="aspectFit" class="icon"></image>
					<view class="tab-title">{{ item.title }}</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			
			<view class="logout" @click="logout">退出登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					name: '',
					tel: '',
					identity: ''
				},
				tabs: [
					{
						title: '会员',
						icon: '../../static/icon/vip.png',
						to: '',
						identity: 'admin'
					},
					{
						title: '加课',
						icon: '../../static/icon/addClass.png',
						to: '/pagesA/addLesson/addLesson',
						identity: 'admin'
					},
					{
						title: '全部约课记录',
						icon: '../../static/icon/record.png',
						to: '',
						identity: 'admin'
					},
					{
						title: '约课记录',
						icon: '../../static/icon/record.png',
						to: '',
						identity: 'member'
					}
				]
			}
		},
		methods: {
			toPage(path) {
				uni.navigateTo({
					url: path
				})
			},
			login() {
				const user = uni.getStorageSync('user')
				if (user) {
					this.user = user
				}				
			},
			logout() {
				uni.removeStorageSync('user')
				this.user = {
					name: '',
					tel: '',
					identity: ''
				}
			},
			isShowTab(e) {
				return e.identity === this.user.identity || e.identity === ''
			}
		},
		computed: {
			noLogin() {
				const {name, tel} = this.user
				return name === '' || tel === ''
			}
		},
		onShow() {
			this.login() 
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F8F8;
	}
	
	.user{
		padding: 50rpx 20rpx;
		background-color: #fff;
	}
	
	.tab{
		margin-top: 50rpx;
		
		.logout{
			margin: 50rpx 20rpx 0;
			padding: 20rpx;
			background-color: #fff;
			text-align: center;
			font-weight: 600;
		}
	}
	
	.tab-item{
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #fff;
		border-bottom: 1px solid #F7F8F8;
		
		.icon{
			--size: 40rpx;
			width: var(--size);
			height: var(--size);
		}
		
		.tab-title{
			font-weight: 600;
			margin-left: 20rpx;
		}
	}
	
	.user_box{
		display: flex;
		justify-content: space-between;
	}
	
	.user_box_1{
		display: flex;	
		align-items: center;
		.user_logo{
			width: 50rpx;
			height: 50rpx;
			margin: 20rpx;
		}
		
		.user_info{
			.name {
				font-weight: 600;
			}
			
			.tel {
				font-size: 25rpx;
				color: #5f6368;
			}
		}
	}
</style>